<template>
  <div class="out">
    <!-- select the status -->
    <span>筛选数据：</span>
      <select v-model="op">
                <option v-for="(option ,index) in options">
                    {{ option}}
                </option>
      </select><span>选择的是{{op}}</span>
      <!-- 显示状态数量 -->
      <p>未完成：{{ numUnF}}</p>   
      <p>已完成：{{numF}}</p> 

    <table class="userList">
      <thead>
        <tr>
            <th>序号</th>
            <th>姓名</th>
            <th>号码</th>
            <th>状态</th>
            <th>删除</th>
        </tr>
      </thead>
      <tbody>
          <tr v-for="(item,index) of list"> 
            <td>{{index + 1}}</td>
            <td>{{item.name}}</td>
            <td>{{item.tel}}</td>
            <td >{{item.status}}</td>
            <td @click="deltUse(index)" >{{item.del}}</td>
          </tr>
      </tbody>
    </table>
    <input type="button" value="添加" @click="toggle">
    <!-- 弹框组件 -->
    <tablevue v-show="isShow" @addList='addUse'></tablevue>  
  </div>
</template>

<script>
import tablevue from "./table.vue";
export default {
  components: {
    tablevue: tablevue
  },
  name: "out",
  props: {
    number: {
      type: Number
    }
  },
  data() {
    return {
      op:'',
      selectStatus:'',
      isShow: false,
      message: "输入用户名",
      check: "",
      list: [],
      options: ['已完成','未完成'],
      status:''
    };
  },
  // 加载localStrage中的数据
  mounted() {
    this.list = JSON.parse(localStorage.getItem("list")) || [];
  },
  // 根据状态重新渲染列表
  watch:{
    op: function () {
      // 获取数据要this，this（不能忘记了）
          //  console.log(this.op);
            let listSelect = [];
            listSelect = this.list.filter(item => {
            return item.status == this.op;
        });
        console.log(listSelect);
        this.list = listSelect;
      }
    
  },
  methods: {
    addUse (addN) {
      this.list.push(addN);
      window.localStorage.setItem("list", JSON.stringify(this.list));
      this.isShow = false;
    },

    // 删除指定数据
    deltUse (index) {
      this.list.splice(index, 1);
      window.localStorage.setItem("list", JSON.stringify(this.list));
    },
    // 添加弹框点击显示
    toggle () {
      this.isShow = !this.isShow;
    },
  },
  computed: {
    // 已完成状态数量
    numF () {
      return this.list.filter(item => {
        return item.status === "已完成";
      }).length;
    },
    // 未完成状态数量
    numUnF () {
      return this.list.filter(item => {
        return item.status == "未完成";
      }).length;
    }
    
  }
};
</script>
<style scoped>
body {
  font-size: 12px;
}
table {
  border: 0.1rem solid red;
  border-collapse: collapse;
  border-spacing: 0;
  empty-cells: show;
  margin: 5% auto;
}
th,
td {
  padding: 1rem 1.2rem;
  border: 0.1rem solid black;
  text-align: left;
}
th {
  background: yellow;
  font-weight: 600;
}
</style>
